<template>
  <view v-if="type==1" class="relative flex-row tab-bar" :style="{position,top}">
    <view
      v-for="(item,key) in tabs"
      :id="'item'+key"
      :ref="'item'+key"
      :key="key"
      class="tab-item flex-item flex-row flex-center"
      :style="{height}"
      @click="changeTab(key)"
    >
      <view class="relative flex-row flex-center">
        <text class="text-30 color-secondary" :class="{'color-primary text-bold':activeInx===key}">{{ item.title }}</text>
        <view v-if="item.size" class="tips tab-tips flex-row flex-center">
          <text class="text-22 color-white">{{ item.size }}</text>
        </view>
      </view>
    </view>
    <view class="line-box">
      <view class="line bg-df" :style="{left:barLeft+'px',width:lineWidth,height:lineHeight}" />
    </view>
  </view>
  <view v-else-if="type==2" class="flex-row align-end tab-box relative">
    <view
      v-for="(item,index) in tabs"
      :key="index"
      class="tab-item-2 flex-item flex-row flex-center relative"
      :class="{active:activeInx===index}"
      @click="changeTab(index)"
    >
      <text class="text-30 text-black" :class="{'text-active':activeInx===index}">{{ item.title }}</text>
    </view>
    <image v-for="(src,index) in bgList[tabs.length-2]" :key="src" :class="{'bg-show':activeInx===index}" mode="widthFix" class="background block" :src="src" />
  </view>
  <view v-else-if="type==3" class="flex-row align-center justify-around order-tab">
    <view v-for="(item,index) in tabs" :key="index" class="flex-column flex-center relative" hover-class="card-hover" :hover-stay-time="70" @click="changeTab(index)">
      <image class="tab-icon" :src="'https://tbb-file.oss-cn-shenzhen.aliyuncs.com/tbb_admin_app/icon/'+item.icon" />
      <text class="text-24" :class="['color-' + (index===activeInx ? 'primary' : 't1')]">{{ item.title }}</text>
      <view v-if="item.size" class="tips order-tips flex-row flex-center">
        <text class="text-22 color-white">{{ item.size }}</text>
      </view>
    </view>
  </view>
  <view v-else-if="type==4" class="flex-row align-center vehicle-tab">
    <view
      v-for="(item,key) in tabs"
      :id="'item'+key"
      :ref="'item'+key"
      :key="key"
      class="tab-item-4 flex-row flex-center"
      :style="{height}"
      @click="changeTab(key)"
    >
      <view class="relative flex-row flex-center">
        <text class="text-30 color-t3" :class="{'color-primary':activeInx===key, 'text-bold':activeInx===key}">{{ item.title }}</text>
      </view>
    </view>
    <view class="line-box">
      <view class="line bg-df" :style="{left:barLeft+'px',width:lineWidth,height:lineHeight}" />
    </view>
  </view>
</template>

<script>
import { getElementInfo } from '@/common/util'
export default {
  name: 'LTabBar',
  props: {
    type: {
      type: [String, Number],
      default: 1
    },
    tabs: {
      type: Array,
      default: () => []
    },
    activeInx: {
      type: Number,
      default: 0
    },
    size: {
      type: Array,
      default: () => []
    },
    height: {
      type: String,
      default: '86rpx'
    },
    lineWidth: {
      type: String,
      default: '60rpx'
    },
    lineHeight: {
      type: String,
      default: '8rpx'
    },
    position: {
      type: String,
      default: ''
    },
    top: {
      type: [String, Number],
      default: 0
    }
  },
  data() {
    return {
      lefts: [],
      bgList: [
        [
          'https://tbb-file.oss-cn-shenzhen.aliyuncs.com/tbb_admin_app/static/tabs-2-1.png',
          'https://tbb-file.oss-cn-shenzhen.aliyuncs.com/tbb_admin_app/static/tabs-2-2.png'
        ],
        [
          'https://tbb-file.oss-cn-shenzhen.aliyuncs.com/tbb_admin_app/static/tabs-3-1.png',
          'https://tbb-file.oss-cn-shenzhen.aliyuncs.com/tbb_admin_app/static/tabs-3-2.png',
          'https://tbb-file.oss-cn-shenzhen.aliyuncs.com/tbb_admin_app/static/tabs-3-3.png'
        ]
      ]
    }
  },
  computed: {
    barLeft() {
      return this.lefts[this.activeInx]
    }
  },
  mounted() {
    if (this.type == 1 || this.type == 4) {
      setTimeout(() => {
        this.tabs.forEach((item, key) => {
          getElementInfo('#item' + key, res => {
            if (res) {
              const left = res.left + res.width / 2 - uni.upx2px(parseInt(this.lineWidth) || 60) / 2
              this.lefts.push(left)
            }
          }, this)
        })
      }, 100)
    }
  },
  methods: {
    changeTab(i) {
      this.$emit('update:activeInx', i)
      this.$emit('change', i)
    }
  }
}
</script>

<style scoped lang="scss">
.tab-bar{
  z-index:50;
}
.tab-item{
  height:86rpx;
  background:#FFFFFF;
}
.tips{
  min-width: 30rpx;
  height:30rpx;
  padding:0 5rpx;
  border-radius:15rpx;
  background:$color-error;
}
.tab-tips{
  @include position(absolute,$top:-6px,$left:100%);
}
.line-box{
  width:750rpx;
  height:10rpx;
  position:absolute;
  left:0;
  bottom:0;
}
.line{
  width:60rpx;
  height:8rpx;
  border-radius:4rpx;
  position:absolute;
  bottom:0;
  transition:left .3s ease-in-out;
  background: $color-primary;
}
.tab-item-2{
  height:76rpx;
  z-index:10;
}
.active{
  height:98rpx;
}
.text-active{
  font-size:34rpx;
  font-weight: 600;
}
.background{
  width:100%;
  @include position(absolute,$bottom:-2rpx,$left:0);
  z-index:1;
  opacity: 0;
}
.bg-show{
  opacity:1;
}
.order-tab{
  width: 750rpx;
  height: auto;
  background: #FFFFFF;
  padding-top: 35rpx !important;
  padding-bottom: 40rpx !important;
  box-sizing: border-box;
}
.tab-icon{
  width:56rpx;
  height:56rpx;
}
.order-tips{
  @include position(absolute,0,$right:0);
}
.vehicle-tab{
  height: 80rpx;
  background: $color-secondary;
  padding:0 32rpx;
  border-bottom:2rpx solid #444444;
}
.tab-item-4{
  height:80rpx;
  padding:0 32rpx;
}
</style>
